<template>
    <div class="s-table">
    <ul class="s-title">
      <li>封面</li>
      <li>名称</li>
      <li>派单指数</li>
      <li>性别频道</li>
      <li>已推次数</li>
    </ul>
    <ul class="s-content" v-for="(item,index) in datalist" :key="index">
      <li><img :src="baseUrl + item.img" alt=""></li>
      <li>
        <p><span @click="clickRead(item.id)">{{'['+item.cate_name+']'+' '+ item.novel}}</span>[{{item.status == 1?'连载中':'' || item.status == 2?'已暂停':'' || item.status == 3?'已完结':''}}]</p>
        <p>共 {{item.max}} 章. 第 {{item.default_sub_chapter_num}} 章开始要求关注 </p>
        <p>最新章节: {{item.chapter.chapter}}</p>
        <p>{{item. update_time | timestampToTime}}</p>
      </li>
      <li><span class="score">{{item.score}}</span></li>
      <li><span>{{item.channel == 1?'男频':'女频'}}</span></li>
      <li><span @click="generalize(item.id)">{{item.exten.exten}}</span></li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["booklistData"],
  data() {
    return {
      baseUrl: "https://qiyun-1256751864.cos-website.ap-guangzhou.myqcloud.com/zhong/",
      presentation: [],
      manage: true,
      datalist: this.booklistData
    };
  },
  components: {},
  methods: {
    clickRead(book_id) {
      this.$router.push("/home/novellist/" + book_id);
    },
    generalize (book_id) {
      this.$router.push({path: "/home/Extension/elink", query: {book_id: book_id}});
    }
  },
  watch: {
    booklistData(value, oldvalue) {
      this.datalist = value;
    }
  },
  created() {
      
  }
};
</script>


<style scoped>
/* 表格 */
.s-table {
  width: 100%;
  border: 1px solid #ccc;
  margin-bottom: 52px;
}
.s-table .s-title {
  width: 100%;
  height: 46px;
  background-color: #36a4ff;
  display: flex;
}
.s-table .s-title > li {
  text-align: center;
  color: #fff;
  font: 14px/46px "微软雅黑";
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  font-weight: bold;
}
.s-table .s-title > li:nth-child(1) {
  width: 15%;
}
.s-table .s-title > li:nth-child(2) {
  width: 47.5%;
}
.s-table .s-title > li:nth-child(3) {
  width: 12.5%;
}
.s-table .s-title > li:nth-child(4) {
  width: 12.5%;
}
.s-table .s-title > li:nth-child(5) {
  width: 12.5%;
}
.s-table .s-title > li:last-child {
  border-right: none;
}

.s-table .s-content {
  width: 100%;
  /* height: 147px; */
  background-color: #fff;
  display: flex;
  font-size: 14px;
}
.s-table .s-content:nth-child(2n + 3) {
  background-color: #f4f4f4;
}
.s-table .s-content > li {
  position: relative;
  text-align: center;
  /* line-height: 147px; */
  color: #666;
  font: 14px/46px "微软雅黑";
  letter-spacing: 1px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.s-table .s-content > li:nth-child(1) {
  width: 15%;
}
.s-table .s-content > li:nth-child(1) img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 91px;
  height: 127px;
}
.s-table .s-content > li:nth-child(2) {
  width: 47.5%;
  text-align: left;
  padding: 30px 0 30px 30px;
  box-sizing: border-box;
}
.s-table .s-content > li:nth-child(2) > p {
  line-height: 1em;
  margin-bottom: 12px;
}
.s-table .s-content > li:nth-child(2) > p:last-child {
  margin-bottom: 0;
}
.s-table .s-content > li:nth-child(2) > p > span {
  font-size: 16px;
  color: #36a4ff;
}
.s-table .s-content > li:nth-child(2) > p > span:hover {
  text-decoration: underline;
  cursor: pointer;
}
.s-table .s-content > li:nth-child(3) {
  width: 12.5%;
}
.s-table .s-content > li:nth-child(3) > span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.s-table .s-content > li:nth-child(4) {
  width: 12.5%;
}
.s-table .s-content > li:nth-child(4) > span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.s-table .s-content > li:nth-child(5) {
  width: 12.5%;
  border-right: none;
}
.s-table .s-content > li:nth-child(5) > span {
  color: #36a4ff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.s-table .s-content > li:nth-child(5) > span:hover {
  text-decoration: underline;
  cursor: pointer;
}
.s-table .s-content:last-child > li {
  border-bottom: none;
}
</style>

